<template>
    <div class="wrapper">
        <div class="header">
            <h3 style="margin-bottom:20px">任务执行概要</h3>
            <el-row >
                <el-col :span="4" style="margin-bottom:15px">
                    任务编号：{{headerInfo.id}}
                </el-col>
                <el-col :span="4" style="margin-bottom:15px">
                    任务名称：{{headerInfo.name}}
                </el-col>
                <el-col :span="4" style="margin-bottom:15px"> 
                    客户：{{headerInfo.customer}}
                </el-col>
                <el-col :span="4" style="margin-bottom:15px">
                    推送类型：{{showtaskType(headerInfo.taskType)}}
                </el-col >
                <el-col :span="4" style="margin-bottom:15px">
                    内容分类：{{headerInfo.contentName}}
                </el-col>
                <el-col :span="4" style="margin-bottom:15px">
                    推送时间段：{{headerInfo.startTime+" - "+headerInfo.endTime}}
                </el-col>
                <el-col :span="4" style="margin-bottom:15px">
                    计划推送人数：{{headerInfo.normalCount}}
                </el-col>
                <el-col :span="4" style="margin-bottom:15px">
                    已推送人数：{{headerInfo.pushCount}}
                </el-col>
                <el-col :span="4" style="margin-bottom:15px">
                    推送成功人数：{{headerInfo.pushSuccess}}
                </el-col>
                <el-col :span="4" style="margin-bottom:15px">
                    触达率：{{headerInfo.touchRate.toFixed(2)+"%" }}
                </el-col>
                <el-col :span="4" style="margin-bottom:15px">
                    进入直播间人数：{{headerInfo.liveCount}}
                </el-col>
                <el-col :span="4" style="margin-bottom:15px">
                    打赏人数：{{headerInfo.rewardCount}}
                </el-col>
                <el-col :span="4" style="margin-bottom:15px">
                    打赏金额：{{headerInfo.amount}}
                </el-col>

            </el-row>
            
        </div>
        <div class="body">
            <el-button style="position:absolute; right:20px;z-index:99"  @click="goback">返回</el-button>
            <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
                    <el-tab-pane label="任务详情" name="first">
                        <Table :list="list" :state="false" v-loading="loading" :total="total" @sizeChange="handSize" @currentChange='currentChange'>
                        </Table>
                    </el-tab-pane>
                    <el-tab-pane label="直播间详情" name="second">
                        <Table :list="ZBJlist" :state="false" v-loading="loading1" :total="Total" @sizeChange="handSize1" @currentChange="currentChange1">
                        </Table>
                    </el-tab-pane>
            </el-tabs>
        </div>
    
    </div>
</template>

<script>
import Socket from '../../../utils/socket'
import Table from '@/components/Table'
import { getToken } from '../../../utils/auth'
import {pusherInfoList,pusherInfoEdit,pusherInfoAdd,pusherInfoDel,
    headerList,InfoList,zbjList
} from '../../../api/pusher'
export default {
    components:{
        Table
    },
    data () {
        return {
            searchBo:{},
            activeName:'first',
            list:{
                thead:[
                    {label:'抖音ID',prop:"tikTokId",rowspan:1},
                    {label:'抖音昵称',prop:"nickname",rowspan:1},
                    {label:'是否成功',prop:"success",rowspan:1,formatter:(row)=>{
                        switch (row.success) {
                            case 1:
                                return '推送成功'
                            case 0:
                                return '推送失败'
                            default:
                                return row.success
                        }
                    }},
                ],
                tbody:[]
            },
            ZBJlist:{
                thead:[
                    {label:'抖音ID',prop:"tikTokId",rowspan:1},
                    {label:'抖音昵称',prop:"nickname",rowspan:1},
                    {label:'打赏音浪',prop:"amount",rowspan:1},
                    {label:'是否推送该用户',prop:"pushed",rowspan:1,formatter:(row)=>{
                        switch (row.pushed) {
                            case 1:
                                return '推送'
                            case 0:
                                return '未推送'
                            default:
                                return ''
                        }
                    }},
                    {label:'是否推送成功',prop:"success",rowspan:1,formatter:(row)=>{
                        if(row.pushed == 0){
                            return '-'
                        }
                        switch (row.success) {
                            case 1:
                                return '推送成功'
                            case 0:
                                return '推送失败'
                            default:
                                return ''
                        }
                    }},
                ],
                tbody:[]
            },
            loading:false,
            loading1:false,
            total:0,
            title:'新增',
            centerDialogVisible:false,
             addForm:{
                id:'',
                name:'',
                remark:''
            },
            rule:{
                id:[  { required: true, message: '请输入设备ID', trigger: 'blur' },],
                name:[  { required: true, message: '请输入设备别名', trigger: 'blur' },],
                remark:[  { required: true, message: '请输入备注', trigger: 'blur' },]
            },
            pageNum:1,
            pageSize:20,
            userId:'',
            Num:1,
            Size:20,
            Total:0,
            socket:null,
            headerInfo:{}

        }
        
    },
    destroyed() {
        this.socket.close()
    },
    mounted () {
        this.userId = this.$route.query.id;
        this.getList();
        this.getInfoList(),
        this.getZBJList()
       
        this.socket = new Socket({url:'ws://dev-ws.sqcat.cn/pusher-client/'+getToken(),callback:this.onMessage});
    },
    methods:{
        showtaskType (row){
            switch (row) {
                case 1:
                    return '直播打赏';
                case 2:
                    return '直播带货';
                case 3:
                    return '粉丝关注';
        
                    return '';    
            }
        },
        goback() {
            this.$router.go(-1)
        },
        handleClick (tab,event){
            console.log(tab,event)
        },
        onMessage (data) {
            this.getList();
            this.getZBJList();
            this.getInfoList()
        },
        getInfoList () {
            let obj = {
                pageSize:this.pageSize,
                pageNum:this.pageNum
            }
            InfoList(obj,this.userId).then(res=>{
                this.loading =true;
                if(res.status ==200) {
                    this.total = res.data.total;
                    this.list.tbody = res.data.list;
                }
            }).finally(res=>{
                this.loading = false;
            })
        },
        getZBJList () {
             let obj = {
                pageSize:this.Size,
                pageNum:this.Num
            }
            zbjList(obj,this.userId).then(res=>{
                this.loading =true;
                console.log('res',res)
                if(res.status ==200) {
                    this.Total = res.data.total;
                    this.ZBJlist.tbody = res.data.list;
                }
            }).finally(res=>{
                this.loading = false;
            })
        },
        getList () {
            headerList({id:this.userId}).then(res=>{
          
                if(res.status == 200) {
                    
                    this.headerInfo = res.data
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        handSize (data) {
            this.pageNum = data;
            this.getInfoList()
        },
        currentChange (val) {
            this.pageSize = val;
            this.getInfoList()
        },
        handSize1 (data) {
            this.Num = data;
            this.getZBJList()
        },
        currentChange1 (val) {
            this.Size = val;
            this.getZBJList()
        },
        handleEdit (row) {
            this.title = '修改'
            this.addForm = {...row};
            this.centerDialogVisible = true;
        },
        handleDel (row) {
             this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    pusherInfoDel(row).then(res=>{
                        if(res.data) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getList()
                        }else{
                            this.$message({
                                type:'error',
                                message:res.msg
                            })
                        }
                    })
                    
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        }
    }
}
</script>

<style lang="less" scoped>
    /deep/ .el-tabs__item .is-top .is-active{
        background-color:#F56C6C ;
    }
    .wrapper{
        width: 100%;
         overflow: auto;
        .header{
            height: 190px;
            margin-bottom: 25px;
            background-color: #fff;
            padding:20px;
            color:#606266;
            box-sizing: border-box;;
        }
        .body{
            position: relative;
            width: 100%;
            box-sizing: border-box;
            padding:10px 20px;
            height:500px ;
            overflow: auto;
            background-color: #fff;
        }

    }
</style>